<template>
  <c-dialog
    :title="multLang('btn_rst_a', 'title_aah_f')"
    :visible="visible"
    @update:visible="$emit('update:visible', $event)"
    custom-class="c-dialog-reset-password"
    width="390px"
    @close="reset"
  >
    <el-form
      :model="form"
      :rules="rules"
      ref="form"
      label-width="100px"
      :validate-on-rule-change="false"
    >
      <el-form-item :label="multLang('title_dg', ':')">
        <span>
          {{ info.user_name }}
        </span>
      </el-form-item>
      <el-form-item :label="multLang('title_aah_f', ':')" prop="password">
        <el-input
          v-model="form.password"
          :placeholder="multLang('text_d', 'title_aah_f')"
        ></el-input>
      </el-form-item>
    </el-form>
    <template #footer>
      <el-button @click="cancel">
        {{ multLang('btn_cancel_a') }}
      </el-button>
      <el-button type="primary" @click="submit">
        {{ multLang('btn_sure_a') }}
      </el-button>
    </template>
  </c-dialog>
</template>
<script>
import { encrypt } from '@/util/crypto'
import { resetPassword } from '@/http/api/v1/user'
export default {
  name: 'CUserResetPassword',
  components: {},
  props: {
    visible: {
      type: Boolean,
      default: true
    },
    info: {
      type: Object,
      default() {
        return {}
      }
    }
  },
  data() {
    return {
      form: {
        password: ''
      }
    }
  },
  computed: {
    rules() {
      return {
        password: {
          required: true,
          message: this.multLang('text_d', 'title_aah_f'),
          trigger: 'blur'
        }
      }
    }
  },
  watch: {},
  beforeCreate() {},
  created() {},
  beforeMount() {},
  mounted() {},
  beforeUpdate() {},
  updated() {},
  activated() {},
  deactivated() {},
  beforeDestroy() {},
  destroyed() {},
  methods: {
    reset() {
      this.$refs.form.resetFields()
    },
    cancel() {
      this.$emit('update:visible', false)
    },
    submit() {
      this.$refs.form.validate(valid => {
        if (valid) {
          const { id } = this.info
          const password = encrypt(this.form.password)
          resetPassword({ id, password }).then(
            ({ code }) => code === 200 && this.cancel()
          )
        }
      })
    }
  }
}
</script>
<style lang="scss">
.c-dialog-reset-password {
  height: 250px;
}
</style>
